<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切片练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #outer{
            width: 500px;
            margin: 50px auto;
            padding: 10px;
            background-color: #bfa;
            text-align: center;/*设置文本居中*/
        }
    </style>
    <script>
        /*点击上一张切换一张
        * 点击下一张切换一张
        * 要切换图片 需要修改图片的scr属性
        * */
        window.onload=function () {
            var prev=document.getElementById("prev");
            var next=document.getElementById("next");
            //获取img标签
            var img=document.getElementsByTagName("img")[0];
            //创建一个数组,用来保存图片
            var imgArr=["../imagconman/1.jpg","../imagconman/2.jpg","../imagconman/3.jpg","../imagconman/4.jpg","../imagconman/5.jpg"];
            //创建一个变量 用来保存当前正在显示的图片索引
            var index=0;
            var info=document.getElementById("info");
            info.innerHTML="一共是"+imgArr.length+"张图片，当前第"+(index+1)+"张";
                 prev.onclick=function () {
                 // alert("上一张");//上一张
                     index--;
                     if(index<0){

                         index=imgArr.length-1;
                     }
                     img.src=imgArr[index];
                     //点击按钮以后,重新设置提示信息
                     info.innerHTML="一共是"+imgArr.length+"张图片，当前第"+(index+1)+"张";
                };
                next.onclick=function () {
                // alert("下一张");
                    index++;
                    if (index>imgArr.length-1){
                        index=0;
                    }

                //要切换图片 需要修改图片的scr属性
                 img.src=imgArr[index];
                  //点击按钮以后,重新设置提示信息
                   info.innerHTML="一共是"+imgArr.length+"张图片，当前第"+(index+1)+"张";
            }
        }
    </script>
</head>
<body>
<div id="outer">
    <p id="info"></p>
    <img src="../imagconman/1.jpg" alt="雪糕">
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
</div>
</body>
</html>